<template>
  <el-dropdown :size="props.size" trigger="click" @command="command" :placement="props.placement"
               :popper-options="popper_options">
    <template #default>
      <el-button :size="props.size" :type="props.type" :title="props.title" @click="onClick">
        <i :class="icon"></i>
        {{ text }}
      </el-button>
    </template>
    <template #dropdown>
      <el-dropdown-menu slot="dropdown" v-if="display" style="min-width: 100px">
        <el-dropdown-item v-for="(item, idx) in props.options" :key="idx" :command="item.value">
          {{ item.label }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup>
/* eslint-disable */

import {ref} from "vue";
import {usePopperOptions} from "@/widget/use/use-popper-options.js";

/**
 * 下拉按钮
 *
 * 拓展功能：增加一个前置事件，如果返回 false，可以阻止下拉框展开
 */
const props = defineProps({
    // 按钮组
    text: {type: String, default: ''}
    // 按钮类型
    , type: {type: String, default: 'default'}
    // 按钮组件大小
    , size: {type: String, default: 'default'}
    // 按钮类型
    , icon: {type: String, default: 'fa fa-check-square-o'}
    // 鼠标悬浮提示
    , title: {type: String, default: undefined}
    //  "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end"
    , placement: {type: String, default: 'bottom-start'}
    // 按钮组，格式与数据字典一致
    , options: {type: Array, default: undefined}
    // 拦截下拉事件，返回 true 的时候，才回展开下拉框
    , interceptor: {type: Function, default: undefined}
})


// Emits
const emit = defineEmits(['click']);


// 数据加载状态
const display = ref(false);

// 弹窗配置，没这玩意儿会报错
const popper_options = usePopperOptions();


/**
 * 点击展开下拉框
 */
const onClick = () => {
    if (props.interceptor !== undefined) {
        let ret = props.interceptor();
        display.value = ret !== false;
    } else {
        display.value = true;
    }
}
/**
 * 下拉框的点击事件，回调参数为 options 中的 value 值
 */
const command = (val) => {
    emit('click', val);
}
</script>